import React, { Component } from 'react'
import Header from './component/Header'
import List from './component/List'
import Footer from './component/Footer'
import './App.css'

export default class App extends Component {

    // 初始化状态
    state = {
        todos: [
            { id: '001', name: '吃饭', done: true },
            { id: '002', name: '睡觉', done: true },
            { id: '003', name: '打豆豆', done: false },
            { id: '004', name: '逛街', done: true }
        ]
    }

    // addTodo用于添加一个TODO，接受的参数是tododuix 
    addTodo = (todoObj) => {
        // 获取todos
        const { todos } = this.state
        // 追加一个todo
        const newTodos = [todoObj, ...todos]
        // 更新状态
        this.setState({ todos: newTodos })
    }

    // 更新todo
    updateTodo = (id, done) => {
        const { todos } = this.state
        const newTodos = todos.map(todoObj => {
            if (todoObj.id === id) return { ...todoObj, done }
            else return todoObj
        })
        this.setState({ todos: newTodos })
    }

    // 删除todo
    deleteTodo = (id) => {
        const { todos } = this.state
        const newTodos = todos.filter(item => item.id !== id)
        this.setState({ todos: newTodos })
    }

    // 全选事件处理
    checkAllTodo = (done) => {
        const { todos } = this.state
        const newTodos = todos.map(todoObj => {
            return { ...todoObj, done }
        })
        this.setState({ todos: newTodos })
    }

    // 清除已完成事件处理
    clearAllDone = () => {
        const { todos } = this.state
        const newTodos = todos.filter(todoObj => todoObj.done)
        this.setState({ todos: newTodos })
    }

    render() {
        const { todos } = this.state
        return (
            <div>
                <div className="todo-container">
                    <span className="todo-title">我的待办任务</span>
                    <div className="todo-wrap">
                        <Header addTodo={this.addTodo} />
                        <List todos={todos} deleteTodo={this.deleteTodo} updateTodo={this.updateTodo} />
                        <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone} />
                    </div>
                </div>
            </div>
        )
    }
}
